import {Module, MutationTree, ActionTree} from 'vuex';
import {IRootState} from '@/store';
import {getAllMenus} from '@/api/menu';
import generateTree from '@/utils/generateTree';
import {getAccessByRoles} from '@/api/roleAccess';
import generateMenuTree from '@/utils/generateMenuTree';

/* eslint-disable camelcase */
export interface MenuData {
  id: number;
  title: string;
  path: string;
  name: string;
  icon: string;
  parent_id: string | number;
  sort_id: number;
}

export interface ITreeItemData extends MenuData {
  children?: ITreeItemData[]
}

// state类型
export interface IMenusState {
  menuList: Array<MenuData>; // 原始菜单列表数据
  menuTreeData: Array<ITreeItemData>; // 格式化好树形菜单数据
  authMenuTreeData: Array<ITreeItemData>; // 格式化好的树形菜单数据
  authMenuList: Array<MenuData>; // 原始菜单列表数据
}

// 定义state
const state: IMenusState = {
  menuTreeData: [],
  menuList: [],
  authMenuTreeData: [], //格式化好的
  authMenuList: [], //原始的
}

// 定义mutations
const mutations: MutationTree<IMenusState> = {
  // 请求回来的原数据
  SET_MENU_LIST(state, data: IMenusState['menuList']) {
    state.menuList = data;
  },
  // 格式化后的数据
  SET_MENU_TREE_DATA(state, data: IMenusState['menuTreeData']) {
    state.menuTreeData = data;
  },
  // 请求回来的原数据
  SET_AUTH_MENU_LIST(state, data: IMenusState['menuList']) {
    state.authMenuList = data;
  },
  // 格式化后的数据
  SET_AUTH_MENU_TREE_DATA(state, data: IMenusState['menuTreeData']) {
    state.authMenuTreeData = data;
  }
}

// 定义actions
const actions: ActionTree<IMenusState, IRootState> = {
  //↓ 只在菜单管理页面 和 角色授权 时会获取
  getAllMenuList({ dispatch, commit, state,  getters, rootState, rootGetters}) {
    return new Promise<MenuData[]>((resolve, reject) => {
      console.log('getAllMenus --- --- ---');
      getAllMenus().then(response => {
        const {data} = response;
        console.log('before generateTreeData:', data);
        dispatch('generateTreeData', [...data]);
        commit('SET_MENU_LIST', data);
        resolve([...data]);
      }).catch(reject);
    })
  },
  generateTreeData({ commit }, data: IMenusState['menuList']) {
    const treeData = generateTree(data);
    console.log('after generateTreeData:',treeData);
    commit('SET_MENU_TREE_DATA', treeData);
  },
  getAllMenuListByAdmin({ dispatch, commit }) { //和getAllMenuList调用的接口一样, 但数据回来后派发的生成方法不一样
    console.log('getAllMenuListByAdmin --- --- ---');
    return new Promise<MenuData[]>((resolve, reject) => {
      getAllMenus().then(response => {
        const {data} = response;
        console.log('before generateAuthTreeData:',data);
        dispatch('generateAuthTreeData', [...data]);
        commit('SET_AUTH_MENU_LIST', data);
        resolve([...data]);
      }).catch(reject);
    })
  },
  getAccessByRoles({ dispatch, commit }, roles: number[]) {
    console.log('getAccessByRoles --- --- ---');
    return new Promise<MenuData[]>((resolve, reject) => {
      getAccessByRoles(roles).then(response => {
        const {access} = response.data;
        console.log('before generateAuthTreeData:',access);
        dispatch('generateAuthTreeData', [...access]);
        commit('SET_AUTH_MENU_LIST', access);
        resolve([...access]);
      }).catch(reject);
    })
  },
  generateAuthTreeData({ commit }, data: IMenusState['menuList']) {
    const treeData = generateMenuTree(data);
    console.log('after generateAuthTreeData:',treeData);
    commit('SET_AUTH_MENU_TREE_DATA', treeData);
  }
}

// 定义menu module
const menu: Module<IMenusState, IRootState> = {
  namespaced: true,
  state,
  mutations,
  actions
}

export default menu
